<script>
import {useVModel} from '@vueuse/core'
import {provide} from 'vue'
export default {
  name: "XtxTabs",
  props:{
      modelValue:{
          type:[String, Number],
          default:""
      }
  },
  setup(props, {emit}) {
      const activeName = useVModel(props, 'modelValue', emit)
      // 修改active
      const tabClick = (name, index) => {
          activeName.value = name
          emit('tab-click', name, index)
      }
      // 给 pendel 传值
      provide('activeName', activeName)
      return {activeName, tabClick}
  },
  render() {
    
    const slots = this.$slots.default()

    const dynamicPancels = []
    slots.forEach((item,i)=>{
        if(item.type.name === 'XtxTabsPanel'){
            // 静态创建
             dynamicPancels.push(item)
        }else{
            // 动态渲染
            item.children.forEach(v=>{
                dynamicPancels.push(v)
            })
        }
    })
    
    // 需要在这里进行组织
    // 1. tabs组件大容器
    // 2. 选项卡的导航菜单结构
    // 3. 内容容器
    const nav = (
      <nav>
        {
            dynamicPancels.map((item,i)=>{
                return <a 
                href='#' 
                class={{active: item.props.name === this.activeName}} 
                onClick={()=>this.tabClick( item.props.name, i)}
                >
                { item.props.label }
                </a>
            })
        }
      </nav>
    );

    const content = dynamicPancels
    
    return <div class='xtx-tabs'>{[nav, content]}</div>
  },
};
</script>
<style lang="less">
.xtx-tabs {
  background: #fff;
  > nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>